<template>
  <div>
    <el-container>
      <el-header class="titleBar">
        分类管理
      </el-header>

      <el-main class="mainContent">
        <el-card style="margin-bottom:5px">
          <!-- input框输入列 -->
          <el-row :gutter="10">
            <el-col :span="9">
              <!-- 产品名称 -->
              <div class="input_title_box">
                <b class="input_title"> 分类名称</b>
                <el-input v-model="text" placeholder="请输入" clearable style="width:200px"></el-input>
              </div>
            </el-col>
            <el-col :span="10">
              <div class="input_title_box">
                <b class="input_title">分类类目</b>
                <el-select v-model="type" placeholder="请选择分类">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </el-col>
          </el-row>
          <!-- 按钮操作列表 -->
          <el-row :gutter="10" class="btnControl">
              <el-col :span="18"><div class="box_title"></div></el-col>
              <el-col :span="5">
                  <!-- <div class="box_test" style="background:yellow;min-height:36px;"></div> -->
                  <el-row :gutter="10">
                      <el-col :span="8"><el-button  size="mini" @click="empty">重置</el-button></el-col>
                      <el-col :span="8"> <el-button type="primary" size="mini" @click="search" >查询</el-button></el-col>
                      <el-col :span="6"> <el-button type="success" size="mini" @click="addDialogVisible = true"><i class="el-icon-circle-plus-outline"></i> 添加</el-button></el-col>
                  </el-row>
              </el-col>
          </el-row>
        </el-card>
        <el-card>
          <!-- 表单数据 -->
          <el-table  :data="sortlist" border style="width: 100%"
          :header-cell-style="{textAlign: 'center',background:'#ededed',color:'#333',fontWeight:'500'}"
          :cell-style="{ textAlign: 'center' }">
              <el-table-column label="分类编号" prop="id"></el-table-column>
              <el-table-column label="分类名称" prop="name"></el-table-column>
              <el-table-column label="分类类目" prop="category"></el-table-column>
              <el-table-column label="操作" >
                  <template slot-scope="scope">
                      <el-row :gutter="20" class="opBtn">
                          <el-col :span="10" class="etBtn">
                              <el-button type="text" @click="showEditDialog(scope.row)" size="small" >编辑</el-button>
                          </el-col>
                          <el-col :span="10">
                            <el-button type="text" size="small" class="deleteBtn"   @click="removeId(scope.row)">删除</el-button>
                          </el-col>
                      </el-row>

                      
                  </template>
              </el-table-column>
          </el-table>
          <!-- 分页 -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pagination.pagenum"
              :page-sizes="[3, 5, 10, 15]"
              :page-size="pagination.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pagination.total"
            >
            </el-pagination>
        </el-card>
      </el-main>
    </el-container>

    <!-- 添加轮播图 -->
    <el-dialog
      title="添加分类"
      :visible.sync="addDialogVisible"
      width="40%"
      @close="addDialogClosed">
      <el-form
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="70px"
        class="demo-ruleForm"
      >
       <el-form-item prop="name">
          <p>分类名称：</p>
          <el-input v-model="addForm.name" type="text" style="width:220px"></el-input>
       </el-form-item>
       <el-form-item prop="category">
            <p>分类类目：</p>
           <el-select v-model="addForm.category" placeholder="请选择分类" >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
       </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑 -->
    <el-dialog
      title="编辑分类"
      :visible.sync="editDialogVisible"
      width="40%"
      @close="editDialogClosed"
      >
      <el-form
        :model="editForm"
        :rules="editFormRules"
        ref="editFormRef"
        label-width="70px"
        @close="editDialogClosed" >

      <el-form-item prop="name">
        <p>分类名称：</p>
        <el-input v-model="editForm.name" style="width:220px"></el-input>
      </el-form-item>
      
        <el-form-item prop="category">
          <p>分类类目：</p>
          <el-select v-model="editForm.category" placeholder="请选择路径">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary"  @click="editChartInfo">确 定</el-button>

      </span>
    </el-dialog>
    

  </div>
</template>

<script>
export default {
  data() {
    return {
        // select死数据
      options: [
        {
          value: "服务",
          label: "服务",
        },
        {
          value: "产品",
          label: "产品",
        },
      ],
      value: "",
      // 
      sortInfo:{
        total:5,
        list:""
      },
       pagination: {
        pagenum: 1,
        pagesize: 5,
        total: 7,
      },
      sortlist:[],
       addDialogVisible: false,
      addForm: {
        id: "",
        name: "",
        category: "",
        
      },
       file: "",
      addFormRules: {
        name: [{ required: true, message: "请输入文本", trigger: "blur" }],
      },
      editDialogVisible: false,
      // 查询用户信息对象
      editForm: {
        id: "",
        name: "",
        category: "",  
      },
      // 修改表单的校验规则对象
      editFormRules: {
        name: [{ required: true, message: "请输入文本", trigger: "blur" }],

      },
      type:'',
      text:''

    };
  },
  methods:{
      async getSortList(){
          const res = await this.http.get('/type/selectPage',this.pagination)
          this.sortlist = res.list;
          this.pagination.total = res.total;
          console.log(res);
      },
      //  监听pagesize的改变 监听 页码值 改变
    handleSizeChange(newSize) {
      this.pagination.pagesize = newSize;
     this.getSortList()
    },
    // 
    handleCurrentChange(newPage) {
      this.pagination.pagenum = newPage;
      this.getSortList()
    },
    // 添加轮播图
    addDialogClosed() {
      this.$refs.addFormRef.resetFields();
    },
    onSubmit() {
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) return;
        //  发送网路请求
        const { res } = await this.http.post("/type/add", this.addForm);
        console.log(res);

        if (status.code !== 200) {
           this.$message.error("添加行为失败");
        }
        this.$message.success("添加行为成功！");
        this.addDialogVisible = false;
        this.getSortList();
      });
    },
    // 编辑
      async showEditDialog(row){
        const res = await this.http.post("/type/update", this.editForm);
        
        this.editForm= row
        this.editDialogVisible = true
        console.log(row)
    },
    // 监听修改对话框的关闭事件
    editDialogClosed() {
      this.$refs.editFormRef.resetFields();
    },
    // 修改用户信息并提交
    editChartInfo(){
          this.$refs.editFormRef.validate(async valid => {
          // console.log(valid);
          if(!valid) return
          // 发起请求获取
          const res = await this.http.post('/type/update',this.editForm,{
            name:this.editForm.name,
            category:this.editForm.category
          })

          if(status.code !== 200){
            this.$message.error('更新轮播图失败！')
          }
          // 关闭对话框
          this.editDialogVisible = false
          // 刷新数据
          this.getSortList();
          // 提示修改成功
          this.$message.success('更新轮播图成功!')
          console.log(res);
        }) 
    },
    async removeId(row) {
      console.log(row);
      const confirmResult = await this.$confirm(
        "此操作将永久删除该用户, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
      .catch((error) => error);
      console.log(confirmResult);
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }

      const res = await this.http.post("/type/delete", row.id);
      console.log(res);
     this.getSortList();
    },
    async search(){
        const res = await this.http.get('/type/selectVague',{
          name:this.text,
          category:this.type,
          pagenum:this.pagination.pagenum,
          pagesize:this.pagination.pagesize,
          
        })
        console.log(res);
        this.sortlist = res.list
        this.pagination.total = res.total
    },
    empty(){
      this.text=''
      this.type=''
    }
  },
  created(){
      this.getSortList()
  }
};
</script>

<style scoped>
.header_title {
  font-size: 22px;
  margin-bottom: 0px;
  font-weight: 400;
  color: #999999;
}
.bgk {
  background: pink;
}
</style>
